<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/public.css" />
    <style>
       #content {
		width: 100%;
		height: 812px;
		background-color: #FAFAFC;
	}

	.topMain {
		width: 100%;
		height: 240px;
		position: relative;
		background-color: #FFF;
	}

	.topMain .bg_head {
		width: 100%;
		height: 240px;
		position: absolute;
		left: 0;
		top: 0;
	}

	.userP {
		width: 52px;
		height: 52px;
		border: 1px solid #FFFFFF;
		border-radius: 5px;
		position: absolute;
		left: 15px;
		top: 45px;
	}

	.userP .userPone {
		width: 100%;
		height: 100%;
		border-radius: 5px;
		position: absolute;
		left: 0px;
		top: 0px;
		object-fit: cover
	}

	.topMain .username {
		width: 150px;
		height: 52px;
		position: absolute;
		left: 84px;
		top: 45px;
		color: #FFF;
	}

	.username .nameBox {
		width: 100%;
		height: 10px;
		margin-top: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.topMain .nameBox p {
		font-size: 10px;
	}

	.topMain .nameBox img {
		width: 8px;
		height: 8px;
		margin-left: 5px;
	}

	.topMain .editBox {
		width: 78px;
		height: 27px;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 14px 0px 0px 14px;
		color: #FFF;
		text-align: center;
		line-height: 27px;
		position: absolute;
		right: 0;
		top: 44px;
	}

	.fourBox {
		width: 100%;
		height: 35px;
		position: absolute;
		left: 0;
		top: 120px;
	}

	.fourBox .one {
		width: 65px;
		height: 100%;
		color: #FFF;
	}

	.topMain .topBott {
		width: 92%;
		height: 51px;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin: auto;
		transform: translate(-50%, 1px);
	}

	.center_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.topBotBox {
		width: 210px;
		height: 35px;
		position: absolute;
		left: 10px;
		top: 0px;
	}

	.topBotBox p {
		color: #884D1C;
	}

	.buttonOne {
		position: absolute;
		right: 28px;
		top: 13px;
		width: 75px;
		height: 25px;
		background: #42342B;
		border-radius: 12px;
		color: #FDF4EA;
		font-size: 12px;
		text-align: center;
		line-height: 25px;
	}

	.centerBoxOne {
		background-color: #FFF;
		
		height: 110px;
		margin: 11px auto 11px;
		border-radius: 10px;
		padding: 15px 12px;
		color: #000;
	}

	.centerBoxOne .Lists {
		margin-top: 15px;
		width: 100%;
		height: 60px;
	}

	.centerBoxOne .Lists .oneBox {
		width: 41px;
		height: 100%;
		border-radius: 5px;
		background-color: #F2EBFF;
		position: relative;
	}

	.centerBoxOne .Lists .oneBox .zuantu {
		width: 20px;
		height: 15px;
		margin: 5px 0;
	}

	.moneyBox {
		width: 93%;
		height: 61px;
		color: #000;
		margin: 10px auto;
	}

	.moneyBox .moneyOne {
		width: 48%;
		height: 61px;
		background-color: #FFF;
		border-radius: 5px;
	}

	.oneLeft {
		width: 85%;
		height: 35px;
	}

	.oneLeft img {
		width: 40px;
		height: 100%;
		margin-right: 10px;
	}

	.oneLeft div {
		width: calc(100% - 50px);
		height: 100%;
	}


	.banners {
		width: 93%;
		height: 88px;
		margin: 10px auto;
	}

	.banners img {
		width: 100%;
		height: 100%;
	}

	.checkList {
		width: 93%;
		margin: 10px auto;
		background-color: #FFF;
	}

	.oneCheck {
		width: calc(100% - 30px);
		/* height: 45px; */
		border-bottom: 1px solid #F3F3F5;
		padding: 15px;
	}

	.oneCheck .left {
		width: 80px;
		height: 25px;
	}

	.oneCheck .left .imgs {
		width: 13px;
		height: 13px;
	}

	.oneCheck .right {
		width: 180px;
		font-size: 12px;
	}

	.oneCheck .right img {
		width: 15px;
		height: 15px;
	}
	.centerBoxOne .Lists .active{
		background-color: #f1f1f1;
	}
	.centerBoxOne .Lists .imgactive{
		position: absolute;
		right: -5px;
		top: -5px;
		width: 12px;
		height: 12px;
	}
	
    </style>
</head>

<body>
    <div id="view" v-cloak>
        <div id="content">
			<!-- 头部 -->
			<div class="topMain">
				
                <img src="../image/img/bg_head.png" class="bg_head">
				<div class="userP">
					<img :src="returnImg(listData.head_portrait)" onerror="this.src='../image/touxiang.png'" class="userPone">
				</div>
				<div class="username flex_column_around">
					<p style="font-weight: bold; font-size: 14px;">{{listData.name}}</p>
					<div class="nameBox flex">
						<p>账号：</p>
						<p>{{listData.id}}</p>
						<img src="../image/img/copy.png" alt="" @click="copyTxt(listData.id)">
						
					</div>
				</div>

				<div class="editBox" onclick="_url({},'frame4/ucenter')">
					<p style="font-size: 12px;">编辑资料></p>
				</div>

				<!-- 四个选项 -->
				<div class="fourBox flex_around">
					<div class="one flex_column_center" onclick="_url({url:'frame4/collect_frame', title:'关注', types: 1})">
						<p style="font-size: 15px;font-weight: bold;">{{listData.following}}</p>
						<p style="font-size: 11px;">关注</p>
					</div>
					<div class="one flex_column_center" onclick="_url({url:'frame4/collect_frame', title:'粉丝', types: 2})">
						<p style="font-size: 15px;font-weight: bold;">{{listData.attention}}</p>
						<p style="font-size: 11px;">粉丝</p>
					</div>
					<div class="one flex_column_center" onclick="_url({url:'frame4/collect_frame', title:'粉丝', types: 2})">
						<p style="font-size: 15px;font-weight: bold;">{{listData.friend}}</p>
						<p style="font-size: 11px;">好友</p>
					</div>
					<div class="one flex_column_center" v-if="!ios" onclick="_url({}, 'frame4/visitor_win')">
						<p style="font-size: 15px;font-weight: bold;">{{listData.visit}}</p>
						<p style="font-size: 11px;">访客</p>
					</div>
					<!-- <div class="one flex_column_center" v-if="!ios && listData.sex=='男'" onclick="_url({url:'frame4/chongzhicenter',title:'账号余额', moreTitle: '收支明细'})">
						<p style="font-size: 15px;font-weight: bold;">{{listData.volley}}</p>
						<p style="font-size: 11px;">钻石</p>
					</div> -->
				</div>


				<div class="topBott" v-if="!ios" onclick="openVIP()">
					<img src="../image/img/center_bg.png" alt="" class="center_bg">
					<div class="topBotBox flex">
						<img src="../image/img/head.png" alt="" style="width: 22px;height: 18px;margin-right: 10px;">
						<p style="font-weight: bold;font-size: 14px;">VIP</p>
						<p style="margin: 0 10px;">|</p>
						<p style="font-size: 12px;">尊贵会员，享超级权益</p>
					</div>
					<div class="buttonOne">
						立即开通
					</div>
				</div>
			</div>

			<!-- 签到 -->
			<div class="centerBoxOne flex_column_around">
				<p style="font-size: 15px;font-weight: bold;" >每日签到</p>
				<div class="Lists flex_around" onclick="getSign()">
					<div class="oneBox flex_column_center"  :class="{'active':m.is_sign==1}" v-for="(m, index) in qdao.data">
						<p style="font-size: 7px;">第{{index+1}}天</p>
						<img src="../image/img/zuan.png" class="zuantu" alt="">
						<p style="font-size: 7px;">+{{m.money}}</p>
						<img src="../image/task/yqd.png" v-if="m.is_sign==1 && qdao.tianshu>0" class="imgactive">
						<div v-if="qdao.tianshu ==index && qdao.tianshu>0" style="position: absolute;top: -10px;width:100%;height: 16px;">
							<img src="../image/img/tomorrow.png" alt="" width="100%" height="16px">
						</div>
					</div>
					
				</div>
			</div>

			<!-- 收益 -->
			<div class="moneyBox flex_between" v-if="listData.sex=='女'">
				<div class="moneyOne flex_between" onclick="_url({url: 'frame4/wo_de_yu_e_frame', title: '我的收益', moreTitle:'收支明细'})">
					<div class="oneLeft flex">
						<img src="../image/img/money.png" alt="">
						<div class="flex_column_between">
							<p style="font-size: 12px;">我的收益</p>
							<p style="font-size: 15px;font-weight: bold;">{{listData.score}}</p>
						</div>
					</div>
					<p style="margin-right: 5px;"><img src="../image/task/jt.png" width="16px"></p>
				</div>
				<div class="moneyOne flex_between" onclick="_url({url:'frame4/chongzhicenter',title:'账号余额', moreTitle: '收支明细'})">
					<div class="oneLeft flex">
						<img src="../image/img/baozang.png" alt="">
						<div class="flex_column_between">
							<p style="font-size: 12px;">我的钻石</p>
							<p style="font-size: 15px;font-weight: bold;">{{listData.volley}}</p>
						</div>
					</div>
					<p style="margin-right: 5px;"><img src="../image/task/jt.png" width="16px"></p>
				</div>
			</div>
			<div class="moneyBox flex_between" v-if="listData.sex=='男'">
				<div class="moneyOne flex_between" onclick="_url({url:'frame4/chongzhicenter',title:'账号余额', moreTitle: '收支明细'})">
					<div class="oneLeft flex">
						<img src="../image/img/baozang.png" alt="">
						<div class="flex_column_between">
							<p style="font-size: 12px;">我的钻石</p>
							<p style="font-size: 15px;font-weight: bold;">{{listData.volley}}</p>
						</div>
					</div>
					<p style="margin-right: 5px;"><img src="../image/task/jt.png" width="16px"></p>
				</div>
				<!-- <div class="moneyOne flex_between" onclick="_url({url:'frame4/chongzhicenter',title:'账号余额', moreTitle: '收支明细'})">
					<div class="oneLeft flex">
						<img src="../image/img/baozang.png" alt="">
						<div class="flex_column_between">
							<p style="font-size: 12px;">我的钻石</p>
							<p style="font-size: 15px;font-weight: bold;">{{listData.volley}}</p>
						</div>
					</div>
					<p style="margin-right: 5px;"><img src="../image/task/jt.png" width="16px"></p>
				</div> -->
			</div>

			<div class="banners">
				<img src="../image/img/banner.png" alt="">
			</div>


			<!-- 选项列表 -->
			<div class="checkList flex_column">
				<div class="oneCheck flex_between" v-if="!ios" onclick="_url({url:'frame4/renwu',title:'每日任务'})">
					<div class="left flex_between">
						<img src="../image/img/renwu.png" alt="" class="imgs">
						<p style="font-size: 12px;">任务中心</p>
					</div>
					<div class="right flex_end">
						<p>做任务，免费赚钻石</p>
						<img src="../image/img/zuan.png" alt="" style="margin: 0 15px 0 10px;">
						<img src="../image/img/arrow_r.png" alt="" style="width: 5px;height: 10px;">
					</div>
				</div>
				<div class="oneCheck flex_between"  v-if="!ios" onclick="_url({url:'rz/rzcenter', title:'认证'})">
					<div class="left flex_between">
						<img src="../image/img/card.png" alt="" class="imgs">
						<p style="font-size: 12px;">我的认证</p>
					</div>
					<img src="../image/img/arrow_r.png" alt="" style="width: 5px;height: 10px;">
				</div>
				<div class="oneCheck flex_between" v-if="!ios" onclick="_url({url:'frame4/yaoqing', title:'我的邀请'})">
					<div class="left flex_between">
						<img src="../image/img/team.png" alt="" class="imgs">
						<p style="font-size: 12px;">我的邀请</p>
					</div>
					<img src="../image/img/arrow_r.png" alt="" style="width: 5px;height: 10px;">
				</div>
				<div class="oneCheck flex_between" v-if="!ios" onclick="openService()">
					<div class="left flex_between">
						<img src="../image/img/kefu.png" alt="" class="imgs">
						<p style="font-size: 12px;">在线客服</p>
					</div>
					<img src="../image/img/arrow_r.png" alt="" style="width: 5px;height: 10px;">
				</div>
				<div class="oneCheck flex_between" @click="_url({url:'frame3/sz', title:'设置', phone: listData.phone})">
					<div class="left flex_between">
						<img src="../image/member/mm8.png" alt="" class="imgs">
						<p style="font-size: 12px;">系统设置</p>
					</div>
					<img src="../image/img/arrow_r.png" alt="" style="width: 5px;height: 10px;">
				</div>
				<div class="oneCheck flex_between" v-if="!ios && listData.proxy==1" @click="_url({url:'daili_win',title:'超级邀请人', moreTitle: '去邀请'})">
					<div class="left flex_between" style="width: 94px;">
						<img src="../image/img/team.png" alt="" class="imgs">
						<p style="font-size: 12px;">超级邀请人</p>
					</div>
					<img src="../image/img/arrow_r.png" alt="" style="width: 5px;height: 10px;">
				</div>

				<!-- <div class="oneCheck flex_between" @click="_url({url:'tx_frame', title:'美颜'})">
					<div class="left flex_between">
						<img src="../image/member/mm8.png" alt="" class="imgs">
						<p style="font-size: 12px;">美颜</p>
					</div>
					<img src="../image/img/arrow_r.png" alt="" style="width: 5px;height: 10px;">
				</div> -->
			</div>


		</div>


    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/ffkj.js"></script>
<script type="text/javascript" src="../script/update.js"></script>
<script type="text/javascript" src="../script/swiper.js"></script>

<script type="text/javascript" src="../json/imglist.js"></script>
<script type="text/javascript" src="../json/user.js"></script>
<script type="text/javascript" src="../json/rw.js"></script>
<script type="text/javascript">
    var userid;
    var closeid;
    var imgurls = [];
    var view = new Vue({
        el: '#view',
        data: {
            listData: {},
            imgUrl: imgurl,
            imgList: [],
            bigImgList: [],
            upType: 0, // 0图片 1视频
            ios: 1, // 1上架 0非上架
            vipdate: [],
            rwList: rwJson.data[0],

            showNoble: 0,
			signModal: false,
            sMsg: '',
			qdao:{}
        },
        methods: {
            copyTxt(text) {
                copyTxt(text);
            },
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
            
        }
    });
    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: {
            delay: 3000,
        },
        allowTouchMove: false,
    })
    apiready = function() {
        view.ios = $api.getStorage('shang');
        userid = $api.getStorage('userid');
        $api.fixStatusBar($api.dom('header'));
        //监听登录
        // _listener('fresh', function () {
        //     userid = $api.getStorage('userid');
        //     getUserInfo();
        // })
        if (api.systemType == 'ios') {
            userid = $api.getStorage('userid');
            getUserInfo();
           // _heibai(1);
        }
        _listener('viewappear', function() {
            userid = $api.getStorage('userid');
            getUserInfo();
            //_heibai(1);
        })

        _shangla(function() {
            userid = $api.getStorage('userid');
            getUserInfo();
           // _heibai(1);
        }, 1)
		getqdData()
        // setTimeout(function() {
        //     getSign()
        // }, 2000)
    };


    // 获取用户信息
    function getUserInfo() {
        _getUser(function(ret) {
            view.listData = ret.result;
            var nd = new Date().getDate();
            if ($api.getStorage('showNoble') != nd) {
                $api.setStorage('showNoble', nd);
                view.showNoble = ret.result.noble_grade;
                setTimeout(function() {
                    view.showNoble = 0;
                }, 3000)
            }
        })
    }

    // 联系客服
    function openService() {
        _ajax('api/Member/kefu', function(ret, err) {
            if (ret && ret.data && ret.data.id) {
                _url({
                    touserid: ret.data.id,
                    title: '与客服的聊天',
                    moreType: 1,
                }, 'frame0/liaotian_win')
            } else {
                _msg('暂无法联系客服');
            }
        })
    }


    // 获取签到状态
    function getSign() {
        if ($api.getStorage('shang') == 1) return;
        _ajax('api/task/checkSignIn', function(ret, err) {
            if (ret && ret.data ) {
                showDetail('modal/sign_modal')
            }
        }, {
            user_id: $api.getStorage('userid')
        })
    }


	// 获取签到记录
    function getqdData() {
        _ajax('api/task/qiandaorecords', function(ret, err) {
            if (ret && ret.code == 200) {
                view.qdao = ret.data;
            }
        }, {
            user_id: $api.getStorage('userid')
        })
    }
	function qdsubmit() {
        if (view.qdao.is_sign == 1) return;
        _loading();
        _ajax('api/task/qiandaoAjax', function(ret, err) {
            _loadingClose();
            if (ret.code == 200) {
                view.qdao.is_sign = 1
                view.signModal = true;
                view.sMsg = ret.msg;
                view.qdao.tianshu++;
            } else {
                _msg(ret.msg);
            }
        }, {
            user_id: $api.getStorage('userid')
        })
    }
</script>

</html>
